<template>
  <div class="main-case">
    <div class="title">学习网站页面</div>
    <div class="studyweb-container">
      <div class="studyweb-row">
        <div class="studyweb-content" v-for="studyweb in webs" :key="studyweb">
          <a :href="studyweb.url" target="_blank">
            <div class="layui-inline case-img">
              <img :src="studyweb.picture" width="200" height="200" />
            </div>
            <p class="lable">{{ studyweb.name }}</p>
            <p>
              {{ studyweb.detail }}
            </p>
          </a>
        </div>
        <!--<div class="studyweb-content">
          <a href="https://www.icourse163.org/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/慕课.jpg" width="200" height="200" />
            </div>
            <p class="lable">中国大学MOOC</p>
            <p>
              中国大学MOOC(慕课)_国家精品课程在线学习平台，旨在利用现代信息技术和网络技术，推动高校教育教学改革，提高高等教育质量
            </p>
          </a>
        </div>

         <div class="studyweb-content">
          <a href="http://www.icourses.cn/home/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/爱课程.jpg" width="200" height="200" />
            </div>
            <p class="lable">爱课程</p>
            <p>
              “爱课程”网是教育部、财政部“十二五”期间启动实施的“高等学校本科教学质量与教学改革工程”支持建设的高等教育课程资源共享平台。
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a href="https://ke.qq.com/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/腾讯课堂.jpg" width="200" height="200" />
            </div>
            <p class="lable">腾讯课堂</p>
            <p>
              腾讯推出的在线教育平台,聚合大量优质教育机构和名师,下设公务员考试、托福雅思、考证考级、中小学教育等众多在线学习精品课程
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a
            href="https://www.kaikeba.com/?channel=baidu_pc&postion=pinzhuan_sy_pinpaimingcheng"
            target="_blank"
          >
            <div class="layui-inline case-img">
              <img src="../img/开课吧.jpg" width="200" height="200" />
            </div>
            <p class="lable">开课吧</p>
            <p>
              开课吧整合全球知名高校一线师资及实战项目,面向大学生和在职人员提供职业能力进阶、职业资格考试等多元化职业教育及人才服务
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a href="https://open.163.com/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/网易云公开课.jpg" width="200" height="200" />
            </div>
            <p class="lable">网易云公开课</p>
            <p>
              网易公开课汇集世界名校共上千门课程,覆盖科学、经济、人文、哲学等22个领域,在这里你可以开拓视野看世界,获取有深度的好知识。
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a href="https://www.jisuanke.com/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/计蒜客.jpg" width="200" height="200" />
            </div>
            <p class="lable">计蒜客</p>
            <p>
              从感兴趣、有信心到享受成就感，多年来致力于发展让孩子主动、家长放心的信息学教育。助力孩子成长为国家科技高质量的人才。
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a href="https://www.w3school.com.cn/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/w3.jpg" width="200" height="200" />
            </div>
            <p class="lable">W3School</p>
            <p>
              在W3School,你可以找到你所需要的所有的网站建设教程。从基础的 HTML
              到 CSS,乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a href="https://www.csdn.net/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/csdn.jpg" width="200" height="200" />
            </div>
            <p class="lable">CSDN</p>
            <p>
              CSDN是全球知名中文IT技术交流平台,包含原创博客、技术论坛等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
            </p>
          </a>
        </div>

        <div class="studyweb-content">
          <a href="http://codeforces.com/" target="_blank">
            <div class="layui-inline case-img">
              <img src="../img/codeforce.jpg" width="200" height="200" />
            </div>
            <p class="lable">codeforce</p>
            <p>
              Codeforces是全球最著名的在线评测系统之一,这里有高水平的选手,高质量的题目,高密度的比赛。
            </p>
          </a>
        </div> -->
      </div>
      
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      webs: [],
    };
  },
  mounted() {
    axios({
      method: "get",
      url: "/spring-boot/course/manager/2",
    }).then((data) => {
      this.webs = data.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.main-case {
  background-color: rgb(244, 249, 238);
}
.studyweb-row {
  display: flex;
  flex: 2;
  justify-content: space-around;
  flex-wrap: wrap;
  color: black;
  .studyweb-content {
    width: 400px;
    height: 400px;
    border: 1px solid rgb(199, 189, 189);
    margin-right: 10px;
    margin-bottom: 30px;
  }
}
.title {
  text-align: left;
  color: rgba(27, 2, 2, 0.5);
}
</style>
